<template>
    <div class="add">
        <div class="keyindex">
            <div class="chose_index">
                <select>
                    <option>全部机房</option>
                    <option>全部机房1</option>
                    <option>全部机房2</option>
                </select>
            </div>
            <div class="showdata">
                <div class="title">昨日关键指标</div>
                <div class="content">
                    <ul class="clearfix">
                        <li v-for="item in items">
                            <p>{{item.cont}}</p>
                            <p class="total">{{item.total}}</p>
                            <p>日<span class="datanum"><i class="direc">-</i>0%</span></p>
                            <p>周<span class="datanum"><i class="up">↑</i>15%</span></p>
                            <p>月<span class="datanum"><i class="down">↓</i>15%</span></p>
                        </li>
                    </ul>
                </div>
            </div>
        </div>
        <div class="customer_num">
            <div class="chose_num">
                <ul class="clearfix">
                    <li 
                    v-for="(item,index) in items" 
                    :class="{visted:curchose==index}"
                    @click="curchose=index"
                    >{{item.cont}}</li>
                </ul>
            </div>
            <div class="runchart">
                <div class="chose_chartdate clearfix">
                    <div class="chose_time left">
                        <select>
                            <option>最近7天</option>
                            <option>最近3天</option>
                            <option>最近1天</option>
                        </select>
                    </div>
                    <div class="chose_timelimit left">
                        <select>
                            <option>2017-04-10至2017-04-16</option>
                        </select>
                    </div>
                </div>
                <div class="chart_line">
                    <v-report v-bind:x="{width:'100%',height:'100%'}"></v-report>
                </div>
            </div>
        </div>
        <div class="date_total">
            <div class="chose_timelimit">
                <select>
                    <option>2017-04-10至2017-04-16</option>
                </select>
            </div>
            <div class="date_form">
                <table>
                    <thead>
                        <tr>
                            <th>时间</th>
                            <th>新增客户数</th>
                            <th>减少客户数</th>
                            <th>净增客户数</th>
                            <th>累积客户数</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td>2012-2-5</td>
                            <td>100</td>
                            <td>10</td>
                            <td>40</td>
                            <td>7000</td>
                        </tr>
                        <tr>
                            <td>2012-2-5</td>
                            <td>100</td>
                            <td>10</td>
                            <td>40</td>
                            <td>7000</td>
                        </tr>
                    </tbody>
                    <tfoot>
                        <tr>
                            <td>合计</td>
                            <td>200</td>
                            <td>20</td>
                            <td>80</td>
                            <td>14000</td>
                        </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
</template>
<script>
import vReport from '@/components/report/report'
export default {
    name:'add',
    components:{vReport},
    data(){
        return {
            curchose:0,
            items:[
                {
                    cont:'新增客户数',
                    total:100
                },
                {
                    cont:'减少客户数',
                    total:10
                },
                {
                    cont:'净增客户数',
                    total:90
                },
                {
                    cont:'累积客户数',
                    total:10000
                }
            ]
        }
    }
}
</script>
<style lang="scss" scoped>
.add {
    padding: 0.2rem;
}
.chose_index{
    width:1.2rem;
    height:0.4rem;
    select{
        padding:0.1rem 0.2rem;
        border:1px solid #ccc;
        border-radius:3px;
        font-size:0.14rem;
    }
}
.showdata{
    margin-top:0.2rem;
    border:1px solid #ccc;
    border-radius:3px;
    .title{
        border-bottom:1px solid #ccc;
        padding:10px;
    }
    .content{
        ul{
            li{
                width:25%;
                height:100%;
                padding:20px;
                border-right:1px solid #ccc;
                float:left;
                text-align:center;
                span{
                    padding-left:0.1rem;
                }
                .total{
                    font-size:0.2rem;
                    padding:0.1rem 0;
                }
            }
        }
    }
}
.customer_num{
    margin-top:0.2rem;
}
.chose_num{
    width:4.82rem;
    border:1px solid #ccc;
    border-right:none;
    border-radius: 0.05rem;
    ul{
        li{
            width:1.2rem;
            height:0.4rem;
            text-align:center;
            line-height: 0.4rem;
            float:left;
            border-right:1px solid #ccc;
            cursor:pointer;
            &.visted{
                background:#576477;
                color:#fff;
            }
        }
    }
}
.runchart{
    margin-top:0.2rem;
    border:1px solid #ccc;
}
.chose_chartdate{
    height:0.4rem;
    border-bottom:1px solid #ccc;
}
.chose_time{
    width:1.2rem;
    height:0.4rem;
    border-right:1px solid #ccc;
    select{
        padding:0.1rem 0.2rem;
        font-size:0.14rem;
    }
}
.chose_timelimit{
    width:2.3rem;
    height:0.4rem;
    border-right:1px solid #ccc;
    select{
        padding:0.1rem 0.2rem;
        font-size:0.14rem;
    }
}
.chart_line{
    width:100%;
    height:4.1rem;
}
.date_total{
    margin-top:20px;
    border:1px solid #ccc;
}
.date_form{
    table{
        width:100%;
        text-align: center;
        border-collapse: collapse;
        border-top:1px solid #ccc;
        tr{
            height:0.3rem;
            line-height:0.4rem;
            border-bottom:1px solid #ccc;
        }
    }
}

</style>


